.siderBar,
.siderBar-mask {
  position: fixed;
  z-index: 3; }

.siderBar-bg {
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(../img/sideBar-bgImg.png);
  background-position: 2px 0;
  background-repeat: no-repeat; }

.siderBar {
  top: 235px;
  left: 50%;
  margin-left: 590px;
  width: 50px;
  height: 100%;
  transition: top .3s; }
  .siderBar > ul {
    position: relative;
    width: 48px;
    background-color: #f6f9fa;
    border: 1px solid #e5e9ef;
    border-radius: 4px; }
    .siderBar > ul > li {
      position: absolute;
      width: 48px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      transition: background-color .3s,color .3s;
      cursor: pointer; }
    .siderBar > ul > li:nth-child(7) {
      padding-top: 25px;
      background: url(../img/icons.png) -648px -143px no-repeat;
      border-top: 1px solid #e5e9ef; }
    .siderBar > ul > li:hover {
      background-color: #00a1d6;
      color: #fff; }
    .siderBar > ul > li.sdBarLiHover {
      background-color: #00a1d6;
      color: #fff; }
    .siderBar > ul > li:nth-child(7):hover {
      background-position: -712px -143px; }
    .siderBar > ul > div {
      position: absolute;
      top: 100%;
      width: 50px; }

.siderBar-line {
  height: 9px;
  width: 30px;
  margin: 0 auto;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd; }

.siderBar-goTop {
  height: 48px;
  background: url(../img/icons.png) -648px -72px no-repeat;
  background-color: #f6f9fa;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  cursor: pointer; }

.siderBar-goTop:hover {
  background-color: #00a1d6;
  background-position: -714px -72px; }

.siderBar-mask {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0; }
